<script setup lang="ts">
import {useStore} from "vuex";
import {useRoute, useRouter} from "vue-router";
import {Message, Modal} from "view-ui-plus";
import {nextTick, onMounted, ref} from "vue";
import {getDataType} from "@/plugins/index"

const router: any = useRouter();
const route = useRoute();
const store = useStore();

let actiiveTag = ref<any>('/user');// 当前选中的tag
let menuActiveName = ref('/user');
let onRefreshRoute = ref(true);
let menuList = ref<any>([
  {
    title: '个人资料',
    icon: 'md-home',
    path: '/user'
  },
  {
    title: '我的关注',
    icon: 'md-star-outline',
    path: '/user/keep'
  },
  {
    title: '内容管理',
    icon: 'ios-paper',
    children: [
      {
        title: '文章管理',
        path: '/user/article'
      }, {
        title: '评论管理',
        path: '/user/comment'
      }, {
        title: '举报处理',
        path: '/user/report'
      },

    ]
  },
  // {
  //   title: '统计分析',
  //   icon: 'ios-stats',
  //   children: [
  //     {
  //       title: '文章管理',
  //       path: '/t/article'
  //     }, {
  //       title: '评论管理',
  //       path: '/t/comment'
  //     }, {
  //       title: '举报管理',
  //       path: '/t/report'
  //     },
  //
  //   ]
  // },
]);

let tagList = ref<any>([]);

const confirm = () => {
  // 退出登录提醒
  // Message
  Modal.confirm({
    title: '提示',
    content: '<p>是否要退出当前账号</p>',
    onOk: () => {
      Message.success('退出成功');
      store.commit('logout', () => router.push('/'))
    },
    onCancel: () => {
    }
  });
}

const onSelect = (path: string) => {
  // 选择菜单
  console.log(path)
  menuActiveName.value = path;
  let children = menuList.value.reduce((a: any, b: any) => {
    return [...a, b, ...(b.children || [])];
  }, []);
  let find = children.find((item: any) => item.path === path);
  actiiveTag.value = (find || '/user');
  if (!tagList.value.find((item: any) => {
    return item.path === actiiveTag.value.path;
  }) && actiiveTag.value != '/user') {
    // 判断tag中是否包含了已打开的标签并且不能重复添加首页标签
    tagList.value.push(actiiveTag.value);
  }
  router.push(path);
  if (find && path != "/user") {
    // 如果为真就添加进临时缓存
    setTimeout(() => {
      store.commit("addRouteStoreList", route.name);
    }, 100)
  }
}

const clickTag = (item: any) => {
  console.log(item)
  let path;
  if (getDataType(item) == "String") {
    path = item;
    router.push(item);
  } else {
    path = item.path;
    router.push(item.path)
  }
  let find = menuList.value.reduce((a: any, b: any) => {
    return [...a,b, ...(b.children || [])];
  }, []).find((item: any) => item.path === path);
  actiiveTag.value = (find || '/user');

  // console.log(find, path != "/user")
}

const closeTag = (item: any, index: number) => {
  // 删除标签 并删除其缓存路由内容
  let routeInfo = router.getRoutes().find(li => {
    return li.path == item.path
  });
  if (routeInfo) {
    // console.log(routeInfo.name)
    store.commit('deleteouteStoreList', routeInfo.name);
    tagList.value.splice(index, 1);
    if (tagList.value.length) {
      router.replace(tagList.value[index - 1].path);
      menuActiveName.value = tagList.value[index - 1].path;
      actiiveTag.value = tagList.value[index - 1];
    } else {
      router.replace('/user');
      actiiveTag.value = '/user';
      menuActiveName.value = '/user';
    }
  }
}

const refresh = () => {
  // 刷新页面
  let routeName = route.name;
  let notUserHome = routeName != "userHome";// 路由名称不能为首页
  // console.log(routeName, '-------routeName')
  if (notUserHome) {
    store.commit('deleteouteStoreList', routeName);
  }
  router.push('/user/loading');
  setTimeout(() => {
    router.push({name: routeName});
    if (notUserHome) {
      store.commit("addRouteStoreList", routeName);
    }
  }, 500)
  // router.go(0)
  // onRefreshRoute.value = false;
  // setTimeout(() => {
  //   onRefreshRoute.value = true;
  // }, 800)
}

onMounted(() => {
  if (route.path !== "/user") {
    store.commit("addRouteStoreList", route.name);
    menuActiveName.value = route.path;
    let find = menuList.value.reduce((a: any, b: any) => {
      return [...a,b, ...(b.children || [])];
    }, []).find((item: any) => item.path === route.path);
    actiiveTag.value = find;
    tagList.value.push(actiiveTag.value);
  }
})

</script>

<template>
  <div class="userContent">
    <div class="userHeader">
      <div class="userTitle">
        个人中心
      </div>
      <div class="userUtil">
        <span class="gohome" @click="router.push('/')">返回首页</span>
        <span class="exit" @click="confirm">退出登录</span>
      </div>
    </div>
    <div class="userMain">
      <Row style="height: 100%">
        <Col style="height: 100%" :xl="3" :lg="5" :md="5" :sm="6">
          <Menu @on-select="onSelect" style="overflow:auto;height: 100%;width: 100%;" theme="light"
                :active-name="menuActiveName" :open-names="[0,1,2]">
            <div v-for="(item,index) in menuList" :key="index">
              <Submenu v-if="item.hasOwnProperty('children')" :name="index">
                <template #title>
                  <Icon :type="item.icon"/>
                  {{ item.title }}
                </template>
                <MenuItem v-for="(li,i) in item.children" :key="index + '-' + i" :name="li.path">{{
                    li.title
                  }}
                </MenuItem>
              </Submenu>
              <MenuItem v-else :name="item.path">
                <Icon :type="item.icon"/>
                {{ item.title }}
              </MenuItem>
            </div>
          </Menu>
        </Col>
        <Col :xl="21" :lg="19" :md="19" :sm="18" style="height: 100%">
          <div class="userSubject">
            <div class="userTabbar">
              <div class="tabbar">
                <Tag @click="clickTag('/user')" :color="actiiveTag == '/user' ? 'success':''" type="dot">首页</Tag>
                <Tag @click="clickTag(item)" @on-close="closeTag(item,index)" v-for="(item,index) in tagList"
                     :key="index"
                     closable type="dot" :color="actiiveTag.path == item.path ? 'success':''">{{ item.title }}
                </Tag>
              </div>
              <div class="btn">
                <Button @click="refresh" type="primary" icon="md-refresh">刷新</Button>
              </div>
            </div>
            <div class="userRouter">
              <router-view v-if="onRefreshRoute" v-slot="{ Component }">
                <keep-alive :include="store.getters.routeStoreList">
                  <component :is="Component"/>
                </keep-alive>
              </router-view>
              <Spin v-else fix>加载中...</Spin>
            </div>
          </div>
        </Col>
      </Row>
    </div>
  </div>
</template>

<style scoped lang="scss">
.userContent {
  .userHeader {
    height: 80px;
    background-color: #fff;
    box-shadow: 0 0 10px 1px #ddd;
    position: relative;
    z-index: 111;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 25px;

    .userTitle {
      font-size: 20px;
      font-weight: 600;
      color: #333;
    }

    .userUtil {
      span {
        margin-right: 15px;
        font-size: 14px;
        color: #999;
        cursor: pointer;

        &.gohome {
          color: #65ad6a;
        }

        &.exit {
          &:hover {
            color: orangered;
          }
        }

      }
    }
  }

  .userMain {
    height: calc(100vh - 80px);

    .userSubject {
      height: 100%;
      overflow: hidden;
      padding: 20px;

      .userTabbar {
        display: flex;
        padding: 0 25px;
        align-items: center;
        background-color: #fff;

        .tabbar {
          flex: 1;
          height: 50px;
          display: flex;
          align-items: center;
          overflow-x: auto;

          :deep(.ivu-tag) {
            // 让tag在flex布局中可以保持真是宽度
            flex-shrink: 0;
            cursor: pointer;
          }
        }

        .btn {
          padding-left: 20px;
        }
      }


      .userRouter {
        height: calc(100% - 65px);
        margin-top: 15px;
        //padding: 20px;
        //background-color: #fff;
        overflow-y: scroll;
      }
    }
  }
}
</style>
